<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- ctrl+/ 注释语句-->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<!-- //注释 //no? = /+ctrl try=yes！ -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="components-demo">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
		<script>
			//定义一个名为 button-counter 的新组件
			Vue.component('button-counter',{
				//data: function(){ 可简化成下面的形式
				  data() {
					return{
						count:0
					}
				},
				template:'<button v-on:click="count++">,You clicked me {{ count }} times.</button>'
			})
			new Vue({
				el:'#components-demo' ,
			})
		</script>
	</body>
</html>
